<template>
  <div class="datalist">
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input placeholder="请输入关键字" v-model="req.keyword" style="width: 200px; margin-left: 10px" clearable></el-input>
      <el-button type="text" style="margin-left: 20px" size="small" @click="
        req.pageIndex = 1
      getCaseFiles()
        ">
        搜索
      </el-button>
      <el-button type="text" style="margin-left: 20px" size="small" @click="addVis = true">
        添加
      </el-button>
    </div>
    <div class="content">
      <div style="flex: auto">
        <el-table height="600px" :data="res.Items" stripe border highlight-current-row>
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column label="文件名">
            <template slot-scope="scope">
              <a @click="downloadFile(scope.row)">
                {{ scope.row.FL_Name }}
              </a>
            </template>
          </el-table-column>
          <el-table-column label="文件类型" width="160px">
            <template slot-scope="scope">
              {{ scope.row.CF_TypeDesc }}
            </template>
          </el-table-column>
          <el-table-column label="上传人" width="160px">
            <template slot-scope="scope">
              {{ scope.row.USR_Name }}
              [{{ scope.row.USR_Phone | encodePhone }}]
            </template>
          </el-table-column>
          <el-table-column label="备注" width="200px">
            <template slot-scope="scope">
              {{ scope.row.CF_Remark }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="160px">
            <template slot-scope="scope">
              <el-button type="text" size="small" v-if="scope.row.CF_FormID" @click="toForm(scope.row.CF_FormID)"
                icon="el-icon-search">
                详细信息
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
          :current-page.sync="req.pageIndex" :total="res.Total" :page-size="req.pageSize" :page-sizes="[10, 15, 20]"
          @size-change="
            (val) => {
              req.pageSize = val
              getCaseFiles()
            }
          " @current-change="getCaseFiles()"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  baseURL,
  fileRoot,
} from '@/config'
import { getCaseFiles } from '@/api/core/caseFile'
export default {
  props: ['caseId'],
  data: function () {
    return {
      req: {
        caseId: null,
        keyword: '',
        pageIndex: 1,
        pageSize: 10,
      },
      res: {
        Items: [],
        Total: 0,
      },
      fileURL: baseURL + fileRoot,
    }
  },
  methods: {
    toForm(formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },
    downloadFile(file) {
      console.log(this.fileURL + file.FL_SrcPath)
      var a = document.createElement('a')
      a.setAttribute('download', file.FL_Name)
      a.setAttribute('href', this.fileURL + file.FL_SrcPath)
      a.click() // 设置点击事件
    },
    getCaseFiles() {
      this.req.caseId = this.caseId
      getCaseFiles(this.req).then(({ data }) => {
        this.res = data
      })
    },
  },
  created: function () {
    if (!this.caseId) {
      return
    }
    this.getCaseFiles()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: calc(100%);
}
</style>